<template>
    <div class="intro">
      <div class="activity-name">{{detail.name}}</div>
      <video v-if="detail.video_url" :src="detail.video_url"></video>
      <img  v-else :src="detail.img_url">
      <div class="intro-main" :class="{'intro-main-news': componentsType == 'news'}">
        <div class="intro-text">活动介绍</div>
        <p class="intro-content">
          <wxParse :content="detail.desc" />
          <text v-if="detail.theme">活动主题：{{detail.theme}}</text>
          <text> \n </text>
          <text v-if="detail.address_detail">活动地点：{{detail.address_detail}}</text>
          <text> \n </text>
          <text v-if="detail.start_time">活动时间：{{detail.start_time}}至{{detail.end_time}}</text>
          <text> \n </text>
          <text v-if="detail.re_person">负责人：{{detail.re_person}}</text>
        </p>
      </div>
      <div class="shop-promotion" v-if="detail.show_goods == '1'">
        <div class="shop-promotion-top">
          <span class="vertical"></span>
          <div class="shop-promotion-title">好物推荐</div>
        </div>
        <shop-list :shopListData="shopListData"/>
      </div>
      <div class="news-banner" v-if="detail.show_advert == '1'" @click="navigaToTeamwork"><img :src="detail.advert_img_url" alt=""></div>
    </div>
</template>

<script>
import wxParse from 'mpvue-wxparse'
import shopList from './../../components/shopList.vue'
import { getActivityDtail,getNewsDtail } from '../../api/index.js'

export default {
  data(){
    return {
      detail: {},
      componentsType:"", //shoplist开关
      shopListData:''
    }
  },
  onLoad(option) {
    this.componentsType = "";
    if(option.componentsType == 'news'){
      this.componentsType = 'news';
      this.reqNewDetail(option.id);
      wx.setNavigationBarTitle({
        title: '资讯详情' 
      })
    }else{
      this.reqActivityDetail(option.id);
      wx.setNavigationBarTitle({
        title: '活动详情' 
      })
    }
  },
  components:{
    wxParse,
    shopList
  },
  methods: {
    //通过活动传递过来的参数获取活动数据
    async reqActivityDetail(id){
      let parmas = { activity_id: id };
      let res = await getActivityDtail(parmas);
      if(res.data.level == "success"){
        this.detail = res.data.data;
        
      }else{
        wx.showToast({
          title: '获取内容失败',
          icon: 'none',
          duration: 1000
        })
      }
    },
    //通过活动传递过来的参数获取活动数据
    async reqNewDetail(id){
      let parmas = { news_id: id };
      let res = await getNewsDtail(parmas);
      if(res.data.level == "success"){
        this.detail = res.data.data;
        this.shopListData=res.data.data.goods_list;
      }else{
        wx.showToast({
          title: '获取内容失败',
          icon: 'none',
          duration: 1000
        })
      }
    },
    //跳转到填写合作意向页面
    navigaToTeamwork(){
      wx.navigateTo({
        url: '/pages/teamwork/main'
      })
    },
  }
}
</script>

<style lang="stylus" scoped>
  @import url("~mpvue-wxparse/src/wxParse.css");
  .intro
    width 100%
    .activity-name
      padding 30rpx
      font-size 17px
      font-weight 600
    video
      width 100%
      height 450rpx
    img
      width 100%
      height 450rpx
    .intro-main
      padding 30rpx
      .intro-text
        font-size 16px
        font-weight 500
      .intro-content
        margin-top 20rpx
        color #898992
        font-size 12px
        line-height 40rpx
    .intro-main-news
      padding 30rpx 30rpx 0
      .intro-content
        line-height 0rpx
    .shop-promotion
      border-top 20rpx #f1f1f1 solid
      width 100%
      padding 20rpx
      position relative
      .shop-promotion-top
        display flex
        padding-bottom 20rpx
        .vertical
          width 6rpx
          height 28rpx
          background-color black
        .shop-promotion-title
          font-size 15px
          margin-left 10rpx
          font-weight 600
    .news-banner
      width 100%
      height 180rpx
      position relative
      img
        width 100%
        height 180rpx
</style>